<template>
  <div class="jq-container">
    <table border="1" width="100%" cellspacing="0" cellpadding="0">
      <tr v-if="sumTool && tableData.length>1" >
        <th><div class="cell">合计</div></th>
        <th v-for="(item,index) in Object.keys(tableData[0]).length -1">
          {{ sumColumn(index+1) }}
        </th>
      </tr>
      <tr v-if="tableData">
        <slot name="thGroup"></slot>
      </tr>
      <slot :name="`trGroup-${index}`" :rows="tableData" v-for="(column,index) in tableData">
        <tr>
          <slot :name="`td-${j}`" :prop="column" v-for="(row,j) in column">
          <td v-if=" typeof(row)  =='object' && row.rowspan>0" :rowspan="row.rowspan">{{row.value}}</td>
          <td v-if="typeof(row)  !='object'">{{row}}</td>
          </slot>
        </tr>
      </slot>
    </table>
  </div>
</template>

<script>
export default {
  name: "jq-table",
  data() {
    return {

    }
  },
  props:{
    tableData:{
      type:Array
    },
    sumTool:{
      type:Boolean,
      default:true
    },
    sumIndex:{
      type:Array
    }
  },
  methods:{
    sumColumn(index){
      var findex =  this.sumIndex.findIndex((value, arr) => {
        return value == index
      });
      if(findex < 0){
        return '';
      }
      var sumNum = 0;
      for (let i = 0; i < this.tableData.length; i++) {
        var row = this.tableData[i];
        var number = parseFloat(Object.values(row)[index]);
        if( !isNaN(number)){
          sumNum +=number
        }else{
          sumNum = 'N/A'
        }
      }
      return  !isNaN(sumNum) ?  sumNum.toFixed(2) : 'N/A';
    }
  }
}
</script>

<style lang="scss" scoped>
.jq-container{

  table,tr,th,td{
     border: 1px solid #dfe6ec;
     text-align: center;
     line-height: 40px;
     color:#606266;
     font-size: 14px;
  }
  th{
    background-color: #f8f8f9;
  }
}
</style>
